<template>
    <div id="top">
        <span>历史</span>
        <svg @click="$store.commit('liShiQingKong')">
            <use xlink:href="#icon-lajitong"></use>
        </svg>
    </div>
    <div id="list">
        <div v-for="item of $store.state.souSuoLiShi" :key="item" @click="jump(item)">{{item}}</div>
    </div>
</template>
<script>
    import {getBanner} from "@/api";

    export default {
        name: "SearchLiShi",
        data(){
            return{

            }
        },
        methods:{
            jump(item){
                getBanner(`/search/multimatch?keywords=${item}`)
                    .then(response=>{
                        this.souSuoNeiRong=response.data.result
                    })
                setTimeout(()=>{
                    this.$router.push({path:'/searchresult-view',query:{souSuoNeiRong:JSON.stringify(this.souSuoNeiRong)}})
                },1000)
            }
        }
    }
</script>

<style scoped>
    #top{
        width: 94%;
        height: 20px;
        margin: 20px auto;
    }
    svg{
        width: 20px;
        height: 20px;
        float: right;
    }
    #list{
        width: 90%;
        margin: 0 auto;
        height: auto;
    }
    #list>div{
        display: inline-block;
        height: 30px;
        line-height: 30px;
        padding: 0 10px;
        box-sizing: border-box;
        width: 66px;
        background: #fff;
        border-radius: 15px;
        text-align: center;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        color: lightgrey;
    }
</style>